<template>
  <section id="photo-gallery" class="py-12 px-4 md:px-8 bg-white/5 backdrop-blur-sm reveal-section">
    <div class="container mx-auto">
      <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-12 text-center">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">群相册精选</span>
      </h2>
      <!-- 第一行照片 -->
      <div ref="photoRow1" class="photo-row grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/2022年.jpeg" alt="2022年" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">2022年首次群友留念</h3>
              <p class="text-blue-300 text-sm">2022年04月25日</p>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/2023年.png" alt="2023年" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">2023年PPT形式留念</h3>
              <p class="text-blue-300 text-sm">2024年05月17日</p>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/2024年.png" alt="2024年" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">2024年网页形式留念</h3>
              <p class="text-blue-300 text-sm">2024年11月23日</p>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/证书.png" alt="证书" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">证书</h3>
              <p class="text-blue-300 text-sm">2024年08月22日</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 第二行照片 -->
      <div ref="photoRow2" class="photo-row grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/群聊.jpeg" alt="小风车" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">小风车</h3>
              <p class="text-blue-300 text-sm">2022年04月18日</p>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/若智云.png" alt="若智云" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">若智云</h3>
              <p class="text-blue-300 text-sm">2023年09月23日</p>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/公众号.jpg" alt="公众号" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">小宇在折腾公众号</h3>
              <p class="text-blue-300 text-sm">2023年01月31日</p>
            </div>
          </div>
        </div>

        <div class="group relative overflow-hidden rounded-xl shadow-lg aspect-square cursor-pointer transition-all duration-300 hover:shadow-xl">
          <img src="/photo/小宇在折腾.png" alt="小宇在折腾" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
            <div>
              <h3 class="text-white font-medium">小宇在折腾</h3>
              <p class="text-blue-300 text-sm"></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 装饰元素 -->
      <div class="absolute -top-20 -left30 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-32 -right20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
<!--      <div class="mt-8 text-center">-->
<!--        <button class="px-6 py-2 bg-white/10 hover:bg-white/20 rounded-full transition-all duration-300 backdrop-blur-sm">-->
<!--          查看更多照片 <i class="fa fa-arrow-right ml-1"></i>-->
<!--        </button>-->
<!--      </div>-->
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 为每一行照片创建ref
const photoRow1 = ref(null)
const photoRow2 = ref(null)

// 存储所有行ref
const photoRows = ref([])

onMounted(() => {
  nextTick(() => {
    // 收集所有行ref
    photoRows.value = [
      photoRow1.value,
      photoRow2.value
    ].filter(Boolean) // 过滤掉null

    if (photoRows.value.length === 0) return

    // 配置Intersection Observer
    const observerOptions = {
      root: null,
      rootMargin: '0px 0px -20% 0px', // 当行顶部进入视口20%时触发
      threshold: 0.1
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          // 为每一行设置不同的动画延迟
          const delay = index * 300 // 每行延迟300ms

          setTimeout(() => {
            entry.target.classList.add('row-visible')
            observer.unobserve(entry.target)
          }, delay)
        }
      })
    }, observerOptions)

    // 开始观察所有行
    photoRows.value.forEach(row => {
      observer.observe(row)
    })
  })
})
</script>

<style scoped>
/* 相册行初始样式 - 隐藏并定位在下方 */
.photo-row {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1),
  transform 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

/* 相册行可见样式 */
.photo-row.row-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 照片卡片初始样式（确保动画开始前隐藏） */
.photo-row > div {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 相册行可见后显示照片卡片 */
.photo-row.row-visible > div {
  opacity: 1;
  transition-delay: 0.2s; /* 卡片内部延迟，增强层次感 */
}
</style>
